<template>
    <div class="box">
        <el-card class="l">
            <h4>调试</h4>
            <el-divider/>
            <h5>ECB加密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="自定义密钥">
                        <el-input v-model="encrypt.key"/>
                    </el-form-item>
                    <el-form-item label="待加密文本">
                        <el-input type="textarea" v-model="encrypt.text" rows="20"/>
                    </el-form-item>
                    <el-form-item label="加密结果" v-if="encrypt.ecbResult">
                        <el-input type="textarea" readonly v-model="encrypt.ecbResult"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doEncrypt('ecb')" type="primary">加密</el-button>
                    </div>
                </el-form>
            </div>
            <h5>ECB解密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="自定义密钥">
                        <el-input v-model="decrypt.key"/>
                    </el-form-item>
                    <el-form-item label="待解密文本">
                        <el-input type="textarea" v-model="decrypt.text" rows="20"/>
                    </el-form-item>
                    <el-form-item label="解密结果" v-if="decrypt.ecbResult">
                        <el-input type="textarea" readonly v-model="decrypt.ecbResult"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doDecrypt('ecb')" type="primary">解密</el-button>
                    </div>
                </el-form>
            </div>

            <h5>CBC加密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="自定义密钥">
                        <el-input v-model="encrypt.key"/>
                    </el-form-item>
                    <el-form-item label="iv">
                        <el-input v-model="encrypt.iv"/>
                    </el-form-item>
                    <el-form-item label="待加密文本">
                        <el-input type="textarea" v-model="encrypt.text" rows="20"/>
                    </el-form-item>
                    <el-form-item label="加密结果" v-if="encrypt.ecbResult">
                        <el-input type="textarea" readonly v-model="encrypt.ecbResult"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doEncrypt('ecb')" type="primary">加密</el-button>
                    </div>
                </el-form>
            </div>
            <h5>CBC解密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="自定义密钥">
                        <el-input v-model="decrypt.key"/>
                    </el-form-item>
                    <el-form-item label="iv">
                        <el-input v-model="decrypt.iv"/>
                    </el-form-item>
                    <el-form-item label="待解密文本">
                        <el-input type="textarea" v-model="decrypt.text" rows="20"/>
                    </el-form-item>
                    <el-form-item label="解密结果" v-if="decrypt.ecbResult">
                        <el-input type="textarea" readonly v-model="decrypt.ecbResult"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doDecrypt('ecb')" type="primary">解密</el-button>
                    </div>
                </el-form>
            </div>
        </el-card>
        <el-card class="r">
            <h4>Java代码示例</h4>
            <el-divider/>
            <div style="height: 800px;">
                <code-editor ref="editor" class="editor h-100" v-model="editorContent"
                             language="java" theme="dracula" readonly></code-editor>
            </div>
        </el-card>
    </div>
</template>

<script>
    import CodeEditor from "./code-editor";
    export default {
        name: "sm4",
        components: {CodeEditor},
        data(){
            return {
                editorContent: "",
                encrypt:{
                    // privateKey: "",
                    key: "E76E9B4E0245BC56FCE4E29B208C6A50",
                    text: "",
                    iv:"30303030303030303030303030303030",
                    ecbResult: "",
                    cbcResult: ""
                },
                decrypt: {
                    key:"E76E9B4E0245BC56FCE4E29B208C6A50",
                    iv: "30303030303030303030303030303030",
                    // privateKey: "0B1CE43098BC21B8E82B5C065EDB534CB86532B1900A49D49F3C53762D2997FA",
                    text: "",
                    ecbResult: "",
                    cbcResult: ""
                }
            }
        },
        async mounted() {
            var r = await import("./code/sm4")
            var code = r.default.split("\n")
                .map(e => e.trim())
                .filter(e => e)
                .join("\n")
            this.editorContent = code
            console.log(code)
        },
        methods:{
            async doEncrypt(type){
                if(type == 'ecb'){
                    var r = await this.$post("/api/sm4/ecb/doEncrypt", this.encrypt)
                    this.encrypt.ecbResult = r.result
                } else {
                    var r = await this.$post("/api/sm4/cbc/doEncrypt", this.encrypt)
                    this.encrypt.cbcResult = r.result
                }
            },
            async doDecrypt(type){
                if(type === 'ecb'){
                    var r = await this.$post("/api/sm4/ecb/doDecrypt", this.decrypt)
                    this.decrypt.ecbResult = r.result
                } else {
                    var r = await this.$post("/api/sm4/cbc/doDecrypt", this.decrypt)
                    this.encrypt.cbcResult = r.result
                }
            }
        }
    }
</script>

<style scoped>
    h5,h4{
        text-align: left;
    }
    .box{
        display: flex;
        flex-direction: row;
    }
    .l{
        flex: 1;
        margin: 5px;
    }
    .r{
        flex: 1;
        margin: 5px;
    }
</style>
